<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <svg id="svg">
      <!-- 展示数据 {宝马:5000,奔驰:4500,奥迪:6000,大众:7000,保时捷:3000} -->
      <!-- 缩放比例：200/8000 = 0.025-->
      <!-- 标题 -->
      <text class="title" x="10" y="15">12月份德系汽车品牌前5销售量</text>

      <!-- 绘制y轴数值 8000/5 = 1600 -->
      <g class="y-text">
        <text x="20" y="27">8000</text>
        <text x="20" y="67">6400</text>
        <text x="20" y="107">4800</text>
        <text x="20" y="147">3200</text>
        <text x="20" y="187">1600</text>
        <text x="20" y="227">0</text>
      </g>

      <!-- 绘制x轴竖线 200/5=40 -->
      <g class="x-line">
        <path
          d="M25 225V230 M65 225V230 M105 225V230 
                 M145 225V230 M185 225V230 M225 225V230 "
        />
      </g>

      <!-- 绘制x轴文字 -->
      <g class="x-text">
        <text x="45" y="235">宝马</text>
        <text x="85" y="235">奔驰</text>
        <text x="125" y="235">奥迪</text>
        <text x="165" y="235">大众</text>
        <text x="205" y="235">保时捷</text>
      </g>

      <!-- 绘制矩形 40/4 = 10 左右距离10，柱宽20 -->
      <!-- 5*25=125 4.5*25=112.5 6*25=150 7*25=175 3*25=75-->
      <g class="pillar">
        <rect x="35" y="100" width="20" height="125" />
        <rect x="75" y="112.5" width="20" height="112.5" />
        <rect x="115" y="75" width="20" height="150" />
        <rect x="155" y="50" width="20" height="175" />
        <rect x="195" y="150" width="20" height="75" />
      </g>
    </svg>
  </body>
  <script src="coord.js"></script>
  <script src="index.js"></script>
</html>
